<template>
  <el-container>
    <el-main>
      <h1>图片管理</h1>
      <!--搜索功能-->
      <el-row>
        <el-col :span="4" :xs="8">
          <el-input
            placeholder="根据分类搜索"
            v-model="search"
            clearable
          ></el-input>
        </el-col>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="SearchArtcle(search)"
        ></el-button>
      </el-row>
      <!--图片展示-->
      <el-row>
        <el-col class="zhm_elCol">
          <el-table
            :data="tableData"
            border
            style="width: 85%"
            highlight-current-row
          >
            <!--多选框-->
            <el-table-column type="selection" width="40"></el-table-column>
            <!-- 序号 -->
            <el-table-column
              label="序号"
              type="index"
              width="60"
            ></el-table-column>
            <!--图片所属分类-->
            <el-table-column
              prop="category_name"
              label="分类"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  {{ scope.row.typeName }}
                </div>
              </template></el-table-column
            >
            <!--图片封面-->
            <el-table-column label="图片封面" show-overflow-tooltip width="130">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image
                    :src="scope.row.bannerImg[0].imgUrl"
                    style="width: 100px; height: 40px"
                  ></el-image>
                </div>
              </template>
            </el-table-column>
            <!--图片添加时间-->
            <el-table-column
              prop="create_time"
              label="发布时间"
              width="200"
              style="color: red"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.create_time | formatDate }}</span>
              </template>
            </el-table-column>
            <!--文章更新时间-->
            <el-table-column prop="update_time" label="更新时间" width="200">
              <template slot-scope="scope">
                <span>{{ scope.row.update_time | formatDate }}</span>
              </template>
            </el-table-column>
            <!--文章浏览量-->
            <el-table-column prop="views" label="图片数量" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.bannerImg.length }}</span>
              </template></el-table-column
            >
            <el-table-column label="发布状态" show-overflow-tooltip width="80">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  disabled
                  active-color="#13ce66"
                ></el-switch>
              </template>
            </el-table-column>
            <!--操作-->
            <el-table-column label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                  @click="handleDelete(scope.row.id)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
                <el-button
                  @click="handleEdit(scope.row.id)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--分页-->
      <el-row>
        <el-col>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
// 导入时间戳转换日期时间的js
import { formatDate } from "../../assets/static/js/time.js";
export default {
  name: "",
  data() {
    return {
      // tableData: [],
      search: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    // 模糊搜索文章
    SearchArtcle(value) {
      var newTableData = [];
      this.tableData.forEach((ele) => {
        if (value === ele.typeName) newTableData.push(ele);
      });
      this.tableData = newTableData;
    },
    // 批量删除
    DeleteArtcle() {},
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
    },
  },
  // 日期过滤器 时间戳转换成日期时间
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  // 钩子 组件加载后运行 查询所有分类
  created: function () {
    // 组件创建之后
    // 在created这个方法中可以操作后端的数据  数据驱动试图
    // 应用：发起Ajax请求
    /* this.$axios
      .get("/api/v1/article/all")
      .then((res) => {
        // 校验后端返回的code
        if (res.data.code === 1000) {
          this.tableData = res.data.articleList;
        } else {
          alert("数据获取失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });*/
    this.$store.dispatch("getBannerList");
  },
  watch:{
  
  },
  computed: {
    ...mapState({
      tableData: (state) => state.home.allBannerImg,
    }),
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.zhm_elCol {
  text-align: center;
}
</style>
